<!-- List.vue的布局 -->
<template>
  <div>
    <div class="item">
      <h3 class="header">这是一个标题，可能有点长，是的，特别特别长的那种</h3>
      <p class="content">
        这是一些文本的内容啊内容，这是一些文本的内容啊内容，这是一些文本的内容啊内容，这是一些文本的内容啊内容
      </p>
    </div>
    <div class="item">
      <h3 class="header">这是一个标题，可能有点长，是的，特别特别长的那种</h3>
      <p class="content">
        这是一些文本的内容啊内容，这是一些文本的内容啊内容，这是一些文本的内容啊内容，这是一些文本的内容啊内容
      </p>
    </div>
  </div>
</template>
<script>
export default {};
</script>

<style scoped>
/* scoped-局部样式 */
.item {
  box-sizing: border-box;
  width: 350px;
  height: 180px;
  padding: 20px 20px;
  background: #fff;
  border: 1px solid #ccc;
  margin-bottom: -1px; /* 上下边框合并一下 */
}
.header {
  font-size: 22px;
  margin-bottom: 20px;

  /* 文本过长自动截断 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.content {
  color: #999;
  font-size: 14px;
  line-height: 26px;
  height: 78px;

  /* 多行文本截断 */
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
}
</style>
